<template>
	<div class="container">
		<div class="number-card">
			<div class="number-card-item" v-for="(item, index) in numberCard" :key="index">
				<div class="number-value">{{ item.value }}</div>
				<div class="number-label">{{ item.label }}</div>
			</div>
		</div>
		<div class="main">
			<h2>About Us</h2>
			<span class="content-title">Dedicated to offering users:</span>
			<p>TDFsurvey is an online survey community platform that.</p>
			<p>Each year, we inspire individuals like you to contribute their valuable insights through online market research, acknowledging the effort they put into it.</p>
			<p>We are committed to providing our members with a straightforward and enjoyable avenue to reap substantial rewards!</p>
			<p>What's even more exciting is that every time you take a survey, you'll earn special accolades, and the best part is that you can redeem them at your convenience!</p>
			<span class="subhead">Our Services</span>
			<p>We revolutionize the conventional offline survey model to offer a faster, more convenient, and smarter way for you to share your insights. Online surveys empower interviewers to transcend the constraints of time and location, granting a significant degree of freedom in choosing topics. Simultaneously, the integration of rich multimedia tools enhances online surveys, making them more engaging and appealing to a broader audience. Consumers are more inclined to willingly express their genuine thoughts, rendering survey results more representative and closer to reality. As a participant, you can be invited to test new products before they hit the market or preview new advertising campaigns before they are unveiled to the public. Your input has the potential to bring about genuine change.</p>
			<p>1.  questionnaire creation (effortless and professional questionnaire design).</p>
			<p>2. Efficient data collection (multi-channel answer sheet distribution, sharing, and collection).</p>
			<p>3. In-depth survey analysis (comprehensive data analysis, professional report generation).</p>
			<span class="subhead">Our Top Categories:</span>
			<ul>
				<li>Questionnaire Crafting</li>
				<li>Data Gathering</li>
				<li>Survey Analysis</li>
			</ul>
			<p>
				<strong>Telephone:</strong>
				<span>+ 44 753 619 7569</span>
			</p>
			<p>
				<strong>Mail box:</strong>
				<span>business@tidfsurvey.com</span>
			</p>
			<p>
				<strong>Address of China: </strong>
				<span>No.403, Building A, Qiaofu Building, Haibei Construction Avenue, Huangqi, Dali Town, Nanhai District, Foshan City</span>
			</p>
			<p>
				<strong>Address of UK:</strong>
				<span>SUITE 6320 61 BRIDGE STREET KINGTON</span>
			</p>
		</div>
	</div>
</template>

<script setup>
const numberCard = ref([
	{label: 'Certified Members', value: '774822'},
	{label: 'Pay Cash', value: '4050208'},
	{label: 'Operating days', value: '976+'},
])
</script>

<style lang="scss" scoped>
.container {
	width: 60%;
	margin: auto auto 20px;
	padding: 30px;
	border-radius: 15px;
	background-color: #FFF;
	color: #333;
	.number-card {
		display: flex;
		.number-card-item {
			width: 33.33%;
			padding: 25px 50px;
			.number-value {
				font-size: 36px;
				font-weight: 700;
				color: #6f6f6e;
				margin: 30px 0 5px;
				text-align: center;
			}
			.number-label {
				margin: 20px;
				color: #6f6f6e;
				text-align: center;
			}
		}
	}
	.main {
		h2 {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			margin: 20px 0;
			color: #c00000;
			font-size: 24px;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			font-weight: bold;
		}
		p {
			margin: 20px 0;
			line-height: 1.3;
			strong {
				display: inline-block;
				min-width: 160px;
			}
		}
		.content-title {
			font-size: 24px;
		}
		.subhead {
			font-size: 20px;
    		color: #00b050;
		}
		ul {
			margin: 20px 0;
			li {
				list-style-type: disc;
			}
		}
		
	}
}

</style>